<template>
    <div class="addUserAuth-container">
        <b-container class="bv-example-row row-box">
            <!-- 用户实名认证表单区域 -->
            <b-row align-h="center" class="my-userAuthInfo">
                <b-col cols="12" sm="12" md="12" lg="12">
                    <div class="userAuthInfo">
                        <div class="userAuth-title">
                            <h4><span class="back" @click="goBack"><Icon type="md-arrow-round-back" />
                             返回</span>确认订单</h4>
                        </div>
                    </div>
                </b-col>
            </b-row>
            <b-row>
                <b-col cols="12" sm="12" md="12" lg="12" class="myitem">
                    <a-divider orientation="left">收货地址</a-divider>
                    <router-link to="/receiveAddress" class="go">新增</router-link>
                    <div class="receive-list">
                        <a-radio-group @change="onChange" v-model="value">
                            <a-radio :style="radioStyle" :value="item.raId"
                            v-for="item in addrList" :key="item.raId">
                                <span class="default" v-if="item.raDefaultAddr==1">默认</span>
                                <span class="pad" title="收货人">{{item.raFullname}}</span>
                                <span class="pad" title="手机号">{{item.raPhone}}</span>
                                <span title="收货地址">{{item.raAddr}}</span>
                            </a-radio>
                        </a-radio-group>
                    </div>
                </b-col>
            </b-row>
            <b-row>
                <b-col cols="12" sm="12" md="12" lg="12" class="myitem">
                    <a-divider orientation="left">订单概要</a-divider>
                    <table class="tender-table">
                        <thead>
                            <tr>
                                <th>图片</th>
                                <th>商品名称</th>
                                <th>价格</th>
                                <th>运费</th>
                                <th>小计</th>
                                <th>备注</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in goodsList" :key="item.sId">
                                <td><router-link  :to="'/goodsInfo/' + item.goods.gId">
                                    <img :src="item.mainPic" alt=""></router-link></td>
                                <td>{{item.goods.gName}}</td>
                                <td>￥{{item.sPrice}}</td>
                                <td>￥{{item.sFire}}</td>
                                <td>￥{{item.sTotal}}</td>
                                <td class="myInput">
                                    <input type="text" placeholder="选填备注" v-model="item.remark">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="mybtn-info">
                        <span></span>
                        <div class="go-order">
                            <span class="total">共 {{count}} 件,</span>
                            <span class="total">合计：<span class="red">￥{{totalPrice}}</span></span>
                            <a href="javascript:void(0);" @click.prevent="modal2=true" class="go">提交订单</a>
                            <a href="http://localhost:8080/alipay/pay?orderNo=1266774235&price=11">
                        去支付</a>
                        </div>
                    </div>
                </b-col>
            </b-row>
            <!-- 选中商品下架的列表 -->
            <Modal
                v-model="modal1"
                title="以下商品已经下架啦，请重新选择">
                <div class="shelfGoods">
                    <div class="shelfGoods-item" v-for="item in shelfGoodsList" :key="item.gId">
                        <router-link :to="'/goodsInfo/' + item.gId">
                            <img :src="item.mainPic" alt="" class="space"></router-link>
                        <p>{{item.gTitle}}</p>
                    </div>
                </div>
            </Modal>
            <!-- 去支付模态框 -->
            <Modal
                v-model="modal2"
                title="订单已经生成，赶快去支付吧">
                <div class="shelfGoods">
                    <div class="shelfGoods-item">
                        <a :href="'http://localhost:8080/alipay/pay?orderNo=' + order.oOrderNum + '&price=' + order.oTotalAmount">
                        去支付</a>
                    </div>
                </div>
            </Modal>
        </b-container>
    </div>
</template>

<script>

export default {
    name: 'confirmOrder',
    data() {
        return {
            uId: JSON.parse(localStorage.getItem('user')).uId,
            value: 0, // 单选框默认选中值
            radioStyle: {
                display: 'block',
                height: '30px',
                lineHeight: '30px',
            },
            addrList: [], // 收货地址列表
            goodsList: [], // 商品清单列表
            count: 0, // 订单商品数量
            totalPrice: 0, // 商品总价
            shelfGoodsList: [], // 下架的商品列表
            modal1: false,
            oId: 0, // 订单id
            modal2: false,
            order: '', // 订单信息
            orderList: [], // 订单商品项列表
        }
    },
    created() {
        this.findAddrList()
        this.findGoodsList()
        this.findCountByUserId()
        this.findTotalPrice()
    },
    methods: {
        // 返回按钮
        goBack() {
            this.$router.go(-1)
        },
        // 单选框选中事件
        onChange(e) {
            console.log('radio checked', e.target.value)
            console.log(this.value)
        },
        // 根据用户id查询此用户的收货地址列表，选中默认收货地址
        findAddrList() {
            this.$axios({
                url: 'receiveAddress/findByUserId/' + JSON.parse(localStorage.getItem('user')).uId,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.addrList = res.data.list
                    this.addrList.forEach(item => {
                        if (item.raDefaultAddr == 1) {
                            this.value = item.raId
                        }
                    })
                }
            })
        },
        // 根据用户id获取用户选中的商品列表
        findGoodsList() {
            this.$axios({
                url: 'shopcar/findGoodsByUserId/' + this.uId,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.goodsList = res.data.list
                    this.goodsList.forEach(item => {
                        this.$axios({
                            url: 'goodsPicture/findMainPicByGoodsId/' + item.goods.gId,
                            method: 'get',
                        }).then(res => {
                            if (res.data.code === 200) {
                            // vue给对象新增属性并触发视图更新
                                this.$set(item, 'mainPic', res.data.object.gpAddress)
                                this.$set(item, 'remark', '')
                            }
                        }).catch(error => {
                            console.log(error)
                        })
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 获取用户选中的商品数量
        findCountByUserId() {
            this.$axios({
                url: 'shopcar/findCheckCountByUserId/' + this.uId,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.count = res.data.object
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 根据用户id计算用户选中的商品总价
        findTotalPrice() {
            this.$axios({
                url: 'shopcar/findTotalPrice/' + this.uId,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.totalPrice = res.data.object
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 点击提交订单按钮判断商品是否下架，未下架的话生成订单和订单商品表
        submitOrders() {
            this.$axios({
                url: 'goods/checkHas/' + this.uId,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.shelfGoodsList = res.data.list
                    // 不为空表示有商品已被下架
                    if (this.shelfGoodsList.length != 0) {
                        this.shelfGoodsList.forEach(item => {
                            this.$axios({
                                url: 'goodsPicture/findMainPicByGoodsId/' + item.gId,
                                method: 'get',
                            }).then(res => {
                                if (res.data.code === 200) {
                                    this.$set(item, 'mainPic', res.data.object.gpAddress)
                                }
                            }).catch(error => {
                                console.log(error)
                            })
                        })
                        this.modal1 = true
                    } else {
                        // 新增订单和订单商品项
                        this.createOrder()
                    }
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 新增订单
        createOrder() {
            this.$axios({
                url: 'orders/save',
                method: 'post',
                params: {
                    oUid: this.uId,
                    oTotalAmount: this.totalPrice,
                    oRaid: this.value,
                },
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    // 得到订单id，根据订单id查询订单信息
                    this.oId = res.data.object
                    console.log(res.data.object)
                    // 新增订单商品项
                    this.createOrderItems()
                    this.$axios({
                        url: 'orders/findById/' + res.data.object,
                        method: 'get',
                        headers: {
                            Authorization: localStorage.getItem('token'),
                        },
                    }).then(res => {
                        if (res.data.code === 200) {
                            this.order = res.data.object
                            console.log(this.order)
                            // 新增订单商品项成功，打开模态框调用支付宝支付接口
                            this.modal2 = true
                        }
                    }).catch(error => {
                        console.log(error)
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 新增订单商品项
        createOrderItems() {
            this.goodsList.forEach(item => {
                this.orderList.push({
                    oiGid: item.sGid,
                    oiOid: this.oId,
                    oiTotal: item.sTotal,
                    oiRemark: item.remark,
                })
            })
            console.log(this.orderList)
            this.$axios({
                url: 'orders/saveItem',
                method: 'post',
                dataType: 'json',
                data: JSON.stringify(this.orderList),
                headers: {
                    Authorization: localStorage.getItem('token'),
                    'Content-Type': 'application/json',
                },
            }).then(res => {
                if (res.data.code === 200) {
                    console.log(res.data.msg)
                }
            }).catch(error => {
                console.log(error)
            })
        },
    },
}

</script>
<style scoped>
.default {
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 4px;
    color:#ef4238;
    border:1px solid #ef4238;
    margin-right: 8px;
}
.ant-radio-wrapper {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5 !important;
    list-style: none;
    -webkit-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
    position: relative;
    display: inline-block;
    margin-right: 8px;
    white-space: pre-wrap !important;
    cursor: pointer;
    height: 55px !important;
    padding: 6px 0;
}
.total {
    font-size: 12px;
    columns: #4e4e4e;
}
.myitem h6 {
    background: #efefef;
    padding: 10px 10px;
    color:#444;
}
.back {
    cursor: pointer;
    margin-right: 10px;
    font-size: 12px;
    font-weight: normal;
    color:rgb(163, 163, 163);
}
.pad {
    margin-right: 5px;
    display: inline-block;
}
.pay {
    display: inline-block;
}
.ivu-radio-group {
    width: 100%;
}
.go {
    display: inline-block;
    padding: 2px 8px;
    border: 2px solid skyblue;
    border-radius: 15px;
}
.receive-list {
    width: 100%;
}
.receive-item {
    width: 95%;
    display: inline-block;
}
.row-box{
    background: #fff;
    padding: 30px;
    margin-bottom: 30px;
    min-height: 520px;
}
.my-goodsInfo {
    margin-top: 20px;
}
.tender-table{
    width: 100%;
    border-collapse: collapse;
}
.tender-table tr{
    border-bottom:1px solid #eee;
    text-align: left;
}
.tender-table thead tr{
    border-top:1px solid #eee;
    border-bottom:2px solid #eee;
}
.tender-table th,.tender-table td{
    padding:7px 10px;
}
.tender-table img {
    width: 45px;
    height: 45px;
}
.mybtn-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}
.total {
    margin-right: 10px;
}
.red {
    color: #ef4238;
    font-size: 14px;
}
.go {
    display: inline-block;
    padding: 4px 8px;
    border: 2px solid skyblue;
    border-radius: 15px;
    margin-bottom: 8px;
}
.myInput input {
    outline: 0;
    border:1px solid rgb(224, 224, 224);
    padding: 4px 5px;
    font-size: 12px;
}
</style>
